<template>
  <el-card :body-style="{ padding: '8px 18px' }">
    <div slot="header" class="me-category-header">
      <span>{{ cardHeader }}</span>
      <a @click="moreProjects" class="me-pull-right me-tag-more">查看全部</a>
    </div>

    <ul class="me-category-list">
      <li
        v-for="p in projects"
        @click="view(p.projectName)"
        :style="itemStyle"
        :key="p.id"
        class="me-category-item"
      >
        <a>{{ p.projectName }}--{{ p.description }}</a>
      </li>
    </ul>
  </el-card>
</template>

<script>
export default {
  name: "CardArticle",
  props: {
    cardHeader: {
      type: String,
      required: true,
    },
    projects: {
      type: Array,
      required: true,
    },
    itemStyle: Object,
  },
  data() {
    return {};
  },
  methods: {
    moreProjects() {
      this.$router.push(`/basicData/${2}`);
    },
    view(project) {
      this.$notify({
          title: '提示',
          message: '请到后台查阅有关'+project+'项目的标案信息',
          type: 'warning'
        });
    },
  },
};
</script>

<style scoped>
.me-category-header {
  font-weight: 600;
}

.me-category-list {
  list-style-type: none;
}
.me-tag-more {
  font-size: 14px;
  color: #78b6f7;
  position: relative;
}

.me-category-item {
  position: relative;
  padding: 4px;
  font-size: 14px;
}

.me-category-item a {
  color: #5fb878;
}

.me-category-item a:hover {
  text-decoration: underline;
}
</style>
